<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let baseData = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
    ]
    let data1 = [];
    let data2 = [];
    let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
    let count = 0;
    baseData.map((v, k) => {
        count += v.value;
        data1.push({
            ...v,
            itemStyle: {
                color: color[k]
            }
        })
        data2.push({
            ...v,
            itemStyle: {
                color: color[k] + '7F'
            }
        })
    })
    let option = {
        backgroundColor: "#fff",
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '40%'],
                data: data1,
                label: {
                    show: false
                }
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['70%', '50%'],
                data: [
                    ...data2.map((v, k) => {

                        let beforeCount = 0;
                        for (let i = 0; i < k; i++) {
                            beforeCount += data2[i].value;
                        }
                        let afterCount = beforeCount + v.value;

                        let pi = Math.PI * 2 / count;

                        let endAngle = pi * beforeCount;
                        let startAngle = pi * afterCount;
                        let angle = (endAngle + startAngle) / 2;
                        angle = angle * 180 / Math.PI;

                        return {
                            ...v,
                            label: {
                                show: true,
                                position: 'inside',
                                color: "#000",
                                rotate: -angle
                            }
                        }
                    })
                ],
                emphasis: {
                    disabled: true
                }
            }
        ]
    };
    myChart.setOption(option);
})
</script>